<template>
	<view class="container">
		<!-- 主体内容 -->
		<view class="main-content">
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="onClose">×</view>
			<!-- logo -->
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<!-- 提示语 -->
			<view class="tip">已绑定手机号的账号可以用手机号登录</view>
			<!-- 手机号输入和验证码按钮 -->
			<view class="phone-input">
				<text class="area-code">+86&gt;</text>
				<input
					class="input"
					type="number"
					maxlength="11"
					v-model="phone"
					placeholder="请输入手机号"
				/>
				<button class="inline-code-btn"
					@click="getCode"
					:disabled="isCounting"
					:class="{ 'disabled-btn': isCounting }">
					{{ isCounting ? countdown + 's' : '获取验证码' }}
				</button>
			</view>
			<!-- 验证码输入和登录按钮 -->
			<view class="phone-input">
				<text class="area-code">验证码:</text>
				<input
					class="input"
					type="number"
					maxlength="6"
					v-model="verificationCode"
					placeholder="请输入验证码"
				/> 
				<button class="inline-login-btn" @click="loginByCode">登   录</button>
			</view>
			<!-- 账号密码登录 -->
			<view class="switch-login" @click="toAccountLogin">账号密码登录</view>
		</view>
		<!-- 底部微信登录和协议 -->
		<view class="bottom-fixed">
			<!-- 微信登录 -->
			<view class="wechat-login" @click="wechatLogin">
				<image class="wechat-icon" src="/static/wechat.png"></image>
			</view>
			<!-- 协议 -->
			<view class="protocol">
				登录代表同意平台的
				<text class="link" @click="openUserAgreement">《用户服务协议》</text>
				及
				<text class="link" @click="openPrivacyPolicy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../util/request';
	export default {
		data() {
			return {
				phone: '',
				verificationCode: '',
				countdown: 0,
				isCounting: false
			}
		},
		methods: {
			onClose() {
				// 关闭逻辑
			},
			async getCode() {
				console.log('点击获取验证码', this.phone);
				// 验证手机号
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.isCounting) {
					console.log('倒计时中，按钮不可点击');
					return;
				}
				try {
					const res = await request({
						url: 'property-server/sendMessage',
						method: 'POST',
						data: { phone: this.phone }
					});
					console.log('验证码接口返回', res);
					console.log(res.code);
					if (res.code === 200) {
						uni.showToast({
							title: '验证码发送成功',
							icon: 'success'
						});
						console.log('准备开始倒计时');
						this.startCountdown();
					} else if(res.code === 4000){
						console.log('验证码发送失败', res.data);
						uni.showToast({
							title: (res.data) || '发送失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.log('验证码接口请求失败', err);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			},
			startCountdown() {
				console.log('倒计时开始');
				this.isCounting = true;
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					console.log('倒计时：', this.countdown);
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.isCounting = false;
						console.log('倒计时结束，按钮恢复');
					}
				}, 1000);
			},
			toAccountLogin() {
				// 跳转账号密码登录
			},
			wechatLogin() {
				// 微信登录逻辑
				//login({ provider: 'weixin', ... })
			},
			openUserAgreement() {
				// 打开用户协议
			},
			openPrivacyPolicy() {
				// 打开隐私政策
				
			},
			async loginByCode() {
				console.log('点击登录', this.phone, this.verificationCode);
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return;
				}
				if (!this.verificationCode) {
					uni.showToast({ title: '请输入验证码', icon: 'none' });
					return;
				}
				try {
					const res = await request({
						url: 'property-server/loginByCode',
						method: 'POST',
						data: {
							phone: this.phone,
							verificationCode: this.verificationCode
						}
					});
					console.log('登录接口返回', res);
					// 兼容 res.code 或 res.data.code
					const code = res.code !== undefined ? res.code : (res.data && res.data.code);
					const msg = (res.data && (res.data.msg || res.data.message)) || res.msg || '登录失败';
					if (code === 200) {
						// 保存手机号到本地存储
						uni.setStorageSync('phoneNumber', this.phone);
						uni.setStorageSync('token', res.data);
						// 保存JWT令牌
						uni.setStorageSync('jwt', res.data);
						console.log('已保存JWT令牌到本地');
						if (res.data && res.data.userInfo) {
							uni.setStorageSync('userInfo', res.data.userInfo);
						}
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 登录成功后跳转页面
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/index'
							});
						}, 500); // 延迟跳转，保证toast能显示
					} else if(code === 4001){
						uni.showToast({
							title: '验证码错误，请重新输入验证码',
							icon: 'none'
						});
					}
				} catch (err) {
					console.log('登录接口请求失败', err);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style>
	/* 禁止页面滚动 */
	page, .container {
		height: 100vh;
		overflow: hidden;
		background: #fff;
		position: relative;
	}
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		justify-content: flex-start;
	}
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 220rpx; /* 预留底部空间，避免内容被遮挡 */
		position: relative;
	}
	.close-btn {
		font-size: 40rpx;
		position: absolute;
		left: 30rpx;
		top: 30rpx;
	}
	.logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 180rpx; /* 你可以微调这个值让logo正好在红框位置 */
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
		display: block;
	}
	.tip {
		text-align: center;
		color: #888;
		font-size: 24rpx;
		margin-bottom: 40rpx;
	}
	.phone-input {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		margin: 0 0 30rpx 0;
		padding: 0 10rpx;
		width: 80%;
		background: none;
	}
	.area-code {
		color: #888;
		font-size: 32rpx;
	}
	.input {
		flex: 1;
		border: none;
		font-size: 32rpx;
		margin-left: 10rpx;
		background: none;
		outline: none;
		border-radius: 0;
		padding: 0;
		height: 60rpx;
		box-sizing: border-box;
	}
	.inline-code-btn {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		margin-left: 10rpx;
		background: #1aad19;
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
		border: none;
	}
	.disabled-btn {
		background: #ccc !important;
		color: #fff !important;
		border: none !important;
		cursor: not-allowed;
	}
	.switch-login {
		text-align: center;
		color: #888;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}
	.bottom-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); /* 适配iPhone X等 */
	}
	.wechat-login {
		display: flex;
		justify-content: center;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}
	.wechat-icon {
		width: 100rpx;
		height: 80rpx;
	}
	.protocol {
		text-align: center;
		color: #bbb;
		font-size: 22rpx;
		margin-bottom: 20rpx;
	}
	.link {
		color: #1aad19;
	}
	.inline-login-btn {
		height: 60rpx;
		width: 150rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		margin-left: 10rpx;
		background: #1aad19;
		color: #fff;
		border-radius: 30rpx;
		font-size: 26rpx;
		border: none;
	}
</style>
